<template>
  <!-- 顶部滚动选项卡 -->
  <scroll-view
    scroll-x
    class="scroll-row"
    :scroll-into-view="scrollinview"
    :scroll-with-animation="true"
  >
    <view
      v-for="(item, index) in tabs"
      :key="index"
      class="scroll-row-item"
      :id="'item' + index"
      :class="tabindex === index ? 'color1' : ''"
      @tap="changeTab(index)"
    >{{ item.classname }}</view>
  </scroll-view>
  <!-- 滚动条 -->
  <swiper
    class="swiper"
    :duration="150"
    :current="tabindex"
    @change="onchangeTab"
    :style="'height:' + listHeight + 'px'"
  >
    <swiper-item v-for="(item1, index1) in newslist" :key="index1">
      <!-- 数学 语文 科目条 -->
      <scroll-view
        scroll-x
        class="scroll-row"
        :scroll-into-view="scrollinview"
        :scroll-with-animation="true"
      >
        <view
          v-for="(item111, index) in item1.kemu"
          :key="index"
          class="scroll-row-item"
          :id="'item' + index"
          :class="tabindex1 === index ? 'color1' : ''"
          @tap="changeTab1(index, index1, item111)"
        >{{ item111.kemuming }}</view>
      </scroll-view>

      <!-- 科目条的内容 -->
      <swiper
        class="swiper"
        :duration="150"
        :current="tabindex1"
        @change="onchangeTab"
        :style="'height:' + listHeight + 'px'"
      >
        <swiper-item v-for="(item2, index2) in item1.kemu" :key="index2">
          <view class="swiper-item">
            <scroll-view
              scroll-y
              :style="'height:' + listHeight + 'px'"
              @scrolltolower="loadmore(index2)"
            >
              <view v-if="index1 == 0">
                <!-- 话题列表组件 -->
                <view class="huatiliebiao" v-for="(item, index) in item2.neiron" :key="index">
                  <!-- poster为视频封面,timeupdate为视频播放进度事件,每250毫秒触发一次(但是不准)  proxy.$baseUrl+'/' + item.sping_url-->
                  <!-- <video
                    ref="videoPlayer"
                    :src="proxy.$baseUrl + `/api/getspingAPI/${videoSrc(item.sping_url)}`"
                    id="myVideo"

                    :poster="proxy.$baseUrl + '/' + item.titlepic"
                    @loadedmetadata="videoTimeUpdateEvent"
                    @loadeddata="videoLoadStartEvent"
                    :show-center-play-btn="false"
                    :show-fullscreen-btn="false"
                  ></video>-->
                  <image
                    :src="proxy.$baseUrl + '/' + item.titlepic"
                    mode="scaleToFill"
                    style="width: 150rpx; height: 150rpx; border-radius: 8rpx; margin-right: 20rpx"
                  />
                  <view class="neiron">
                    <text
                      style="font-size: 35rpx; color: #668fb9; padding-left: 15rpx"
                    >{{ item.title }}#</text>

                    <view class="huatixiam">
                      <!-- <view style="display: none">{{ }}</view> -->
                      <text
                        style="font-size: 25rpx; color: #acb1b5; padding-left: 40rpx"
                      >总时长：{{ item.time }}</text>
                      <view
                        style="
                          margin-right: 20rpx;
                          background-color: rgb(238, 238, 77);
                          color: #ef8c8ce6;

                          text-align: center;

                          line-height: 60rpx;
                          font-size: 25rpx;
                          width: 100rpx;
                          height: 60rpx;
                          border-radius: 10rpx;
                          margin-left: 200rpx;
                        "
                        @tap="bofang(item)"
                      >播放</view>
                    </view>
                  </view>
                </view>
              </view>
              <view v-else>
                <view class="myfile">
                  <view v-for="(item, index) in item2.neiron" :key="index" class="order_file">
                    <view class="file_box">
                      <view class="file_icon">
                        <text class="icon iconfont icon-wenjian" style="color: rgb(134, 238, 238)"></text>
                      </view>
                      <view @click="onsetfile(item)">
                        <view class="center">
                          <view class="moren" v-if="item.isdefult == 1">
                            <text class="iconfont icon-moren" :style="'color:' + item.color"></text>
                          </view>
                          <view class="name">
                            <!-- 列表 -->

                            <text class="text1">{{ item.wenjianming }}</text>
                          </view>
                          <view class="file_name">{{ item.date }}</view>
                        </view>
                      </view>
                      <view class="caozuo">
                        <view class="edit">
                          <text
                            class="iconfont icon-bianji"
                            v-if="item.biaoshi == '1'"
                            @tap="downloadfile1(item)"
                          >查看已下载</text>
                          <text
                            class="iconfont icon-bianji"
                            v-show="item.biaoshi != '1'"
                            @tap="downloadfile(item)"
                          >下载</text>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </swiper-item>
      </swiper>
    </swiper-item>
  </swiper>
</template>

<script lang="ts" setup>
//
import { ref, watchEffect, getCurrentInstance } from 'vue'

import { getsjuan, getVideoList, getVideoAPI } from '@/services/my copy'
import { guanzhuStore, myStore, ShouyeStore, vip } from '@/stores'
import { formatMessageDate, formatTime, getChatTime } from '@/composables/time'
// #ifdef MP-WEIXIN
import unibadge from '../../components/uni-badge/uni-badge.vue'
import unipopup from '../../components/components/uni-popup/uni-popup.vue'

// #endif
import { onLoad, onShow, onHide, onReady } from '@dcloudio/uni-app'
const { proxy } = getCurrentInstance() as any
const user = myStore()
const nianji1 = ShouyeStore()
const url = ref('http://192.168.43.123:3005/wenjian/2023年新课标全国Ⅰ卷数学真题（原卷版）.docx')
// list是列表
const newslist = ref<any>([
  {
    kemu: [
      { kemuming: '数学', neiron: [3] },
      { kemuming: '语文', neiron: [4] },
      { kemuming: '英语', neiron: [] },
      { kemuming: '物理', neiron: [] },
      { kemuming: '化学', neiron: [] },
    ],
  },
  {
    kemu: [
      {
        kemuming: '数学',
        neiron: [],
      },
      { kemuming: '语文', neiron: [] },
      { kemuming: '英语', neiron: [] },
      { kemuming: '物理', neiron: [] },
      { kemuming: '化学', neiron: [] },
    ],
  },
])
const videoPlayer = ref<any>(null)
//获取视频的组件变量
const videoContext = ref({})
const zhonshichang = ref<any>('')
const zhonshichang1 = ref<any>([[], [], [], [], []])
const zhonshichang2 = ref<any>([])
const mingcheng = ref('')
// 计算时间总时长
const formatTime1 = (seconds: any) => {
  // 计算小时、分钟和秒
  var hours = Math.floor(seconds / 3600)
  var minutes = Math.floor((seconds % 3600) / 60)
  var remainingSeconds = Math.floor(seconds % 60)

  // 格式化为“00:00”的形式
  var formattedTime =
    (hours < 10 ? '0' : '') +
    hours +
    ':' +
    (minutes < 10 ? '0' : '') +
    minutes +
    ':' +
    (remainingSeconds < 10 ? '0' : '') +
    remainingSeconds

  return formattedTime
}
// 获取试卷下载的
onLoad(async () => {
  let res = await getVideoList({
    nianji: nianji1.nianji,
    mingchen: newslist.value[0].kemu[0].kemuming,
    user: user.userinfo.username,
  })
  //获取视频的内容
  newslist.value[0].kemu[0].neiron = res.data
  console.log(res, 'ddwdwdwd')
  // videoSrc(res.data)

})
onReady(async () => {
  videoContext.value = uni.createVideoContext('myVideo')
})
// 开始加载触发视频函数cons
const videoLoadStartEvent = () => {
  console.log('开始加载')
  zhonshichang1.value = []
}
let index2 = ref(0)
// 结束触发
const videoTimeUpdateEvent = (e) => {
  console.log(e, '2')

  zhonshichang.value = Number(e.detail.duration)
  console.log(zhonshichang.value, 'ddd')
  // if (index == 0) {
  // 先判断数组中是否已经存在要压入的元素，如果不存在，则压入
  console.log(index2.value, '222232323')

  zhonshichang1.value[index2.value].push(formatTime1(zhonshichang.value))

  // } else {
  //   zhonshichang2.value.push(formatTime1(zhonshichang.value))
  //   zhonshichang1.value = zhonshichang2.value
  // }

  console.log(zhonshichang1.value, 'ddd1')
}
// 地址视频
const sping = (url) => {
  console.log(proxy.$baseUrl + '/' + url, 'dsad asdasd ')
  // // 提醒用户下载中
  // uni.showToast({ title: '下载中', icon: 'loading' })
  // // 1 将远程文件下载到小程序的内存中
  // uni.downloadFile({
  //   url: proxy.$baseUrl + '/' + url,
  //   success: (res) => {
  //     // 2 成功下载后而且状态码为200时将视频保存到本地系统
  //     if (res.statusCode === 200) {
  //       uni.saveVideoToPhotosAlbum({
  //         filePath: res.tempFilePath,
  //       })
  //       uni.hideLoading()
  //       // 提示用户下载成功
  //       uni.showToast({ title: '下载成功', icon: 'success' })
  //       return res.tempFilePath
  //     }
  //     // 如果该资源不可下载或文件格式出错则提示用户
  //     else {
  //       uni.showToast({ title: '资源格式错误，请联系管理员' })
  //     }
  //   },
  //   fail: (err) => {
  //     // 下载失败提醒
  //     uni.hideLoading()
  //     uni.showToast({ title: '下载失败' })
  //   },
  // })
  return proxy.$baseUrl + '/' + url
}
// 顶部滚动选项卡
const tabindex = ref(0)
const tabindex1 = ref(0)
const tabs = ref<any>([{ classname: '知识点讲解' }, { classname: '试卷下载' }])
// 计算高度
// 默认列表高度
const listHeight = ref(600)
//改变tabIndex
const scrollinview = ref('')
// 顶部滚动选项卡

const changeTab = async (index) => {
  if (tabindex.value === index) return
  // 选项卡点击
  tabs.value[index].active = 'true'
  // 选项卡点击，tabindex要等于e.index
  tabindex.value = index
  // 滚动到指定元素
  tabindex1.value = 0
  scrollinview.value = 'item' + index
  if (index == 1) {
    let res = await getsjuan({
      nianji: nianji1.nianji,
      mingchen: newslist.value[index].kemu[0].kemuming,
      user: user.userinfo.username,
    })

    console.log(res, '试卷111')
    newslist.value[index].kemu[0].neiron = res.data
  } else {
    let res = await getVideoList({
      nianji: nianji1.nianji,
      mingchen: newslist.value[index].kemu[0].kemuming,
      user: user.userinfo.username,
    })
    console.log(res, 'ddwdwdwd')

    //获取视频的内容
    newslist.value[index].kemu[0].neiron = res.data
  }
}
const changeTab1 = async (index, index1, item111) => {
  if (tabindex1.value === index) return
  // 选项卡点击
  newslist.value[index1].kemu.active = 'true'
  // 选项卡点击，tabindex要等于e.index
  tabindex1.value = index
  // 滚动到指定元素
  let res = await getsjuan({ nianji: nianji1.nianji, mingchen: item111.kemuming })
  console.log(res, '试卷')
  if (index1 == 1) {
    newslist.value[index1].kemu[index].neiron = res.data
  } else {
    //获取视频的内容
    let res = await getVideoList({
      nianji: nianji1.nianji,
      mingchen: newslist.value[index1].kemu[index].kemuming,
      user: user.userinfo.username,
    })
    console.log(res, 'ddwdwdwd')

    //获取视频的内容
    console.log(newslist.value[index1].kemu[index].neiron, '我靠靠靠111111')
    index2.value = index
    newslist.value[index1].kemu[index].neiron = res.data
    // if (newslist.value[index1].kemu[index].neiron[0].time) {
    //   console.log('触发时间到了')
    // } else {
    //   newslist.value[index1].kemu[index].neiron.forEach((item111, index11) => {
    //     item111.time = zhonshichang1.value[zhonshichang1.value.length - 1 - index11 * 2]
    //   })
    // }

    console.log(newslist.value[index1].kemu[index].neiron, '我靠靠靠')
  }

  scrollinview.value = 'item' + index
}
const vip1 = vip()
//    // 下载
const downloadfile = (item) => {
  console.log('dddddddddddd')
  if (vip1.vipid == 'true') {
    uni.showModal({
      title: item.wenjianming,
      content: '确认要下载该文件吗',
      confirmText: '下载',
      success: (res) => {
        if (res.confirm) {
          // 跳转到下载页面
          uni.navigateTo({
            url: '/pagesB/sy_xiazai/index?url=' + item.wenjian + '&mingzhi=' + item.wenjianming,
          })
        }
      },
    })
  } else {
    // 提示不是vip 去开通vip
    uni.showModal({
      title: '提示',
      content: '您还不是vip用户，无法下载',
      success: (res) => {
        if (res.confirm) {
          // 跳转到vip页面
          uni.navigateTo({
            url: '../huiyuan_VIP/index',
          })
        }
      },
    })
  }
}
// 预览
const onsetfile = (item) => {
  console.log(item, 'wwwwwwwwwwwww')
  console.log(22222)

  uni.showModal({
    title: item.wenjianming,
    content: '文件名:' + item.wenjianming,
    confirmText: '预览',
    success: (res) => {
      if (res.confirm) {
        //  跳转预览
        uni.navigateTo({
          url: '/pagesB/yulan/index?url=' + item.wenjian + '&mingzhi=' + item.wenjianming,
        })
      }
    },
  })
}
// 查看已下载
const downloadfile1 = (item) => {
  console.log(item, 'wwwwwwwwwwwww')
  console.log(22222)
  //  跳转
  uni.showModal({
    title: item.wenjianming,
    content: '确认要查看已下载吗',
    confirmText: '查看',
    success: (res) => {
      if (res.confirm) {
        // 跳转到下载页面
        uni.navigateTo({
          url: '../../pagesB/sy_xiazai/index',
        })
      }
    },
  })
}
// 播放
const bofang = (item) => {
  console.log(item, '1232')
  //  跳转
  uni.showModal({
    title: item.title,
    content: '确认要播放该视频吗',
    confirmText: '播放',
    success: (res) => {
      if (res.confirm) {
        // 转到下载页面
        uni.navigateTo({
          url:
            '../sy_sping/index?mingchen=' +
            item.title +
            '&kechen=' +
            item.kechen +
            '&nianji=' +
            item.nianji,
        })
      }
    },
  })
}
let match1 = []
let time1 = ref<any>([])
// // 获取视频数据
// const videoSrc =  (filename) => {
//   console.log(filename, 'neiron')
//   let time = ''
//   if (filename) {
//      filename.map(async(item)=>{
//       match1 = item.sping_url.match(/([^\/]+)\.mp4/)
//     console.log(match1, '666666')
//     let res = await getVideoAPI(match1[1])
//     console.log(res.data.videoDuration, '时间')
//     time1.value.push (res.data.videoDuration)
//      })

//   }
//  console.log(time1.value, 'time1');

// }
</script>
<style lang="scss">
@import url('../../static/assets/wxss/iconfont.css');
@import url('../../components/animate.min.css');
// 话题列表
.huatiliebiao {
  // 加个盒子阴影
  box-shadow: 0 0 10px #888888;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  .neiron {
    display: flex;
    flex-direction: row;
    flex-direction: column !important;
    flex: 1;
  }
  .button {
    box-shadow: 0 0 10px #888888;
  }
  .huatixiam {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: #6c757d;
  }
}
.fshu {
  // 加粗

  font-size: 30rpx;
  display: flex;
  justify-content: space-between;
  //
  margin-top: 30rpx;
  // 底部线条
  border-bottom: 1px solid #373333;
  width: 85%;
  height: 100rpx;
  // 圆润
  border-radius: 13rpx;
  // 背景颜色
  background-color: rgb(227, 219, 98);
  margin-left: 40rpx;
  padding: 20rpx;
}
.daxiao {
  // 左右间距20px
  margin-left: 15px;
  // 图标变大
  font-size: 25px;
}
.scroll-row {
  width: 100%;
  white-space: nowrap;
  height: 100rpx;
  border-bottom-width: 1rpx;
  border-bottom-style: solid;
  border-bottom-color: #dee2e6;
}
.scroll-row-item {
  display: inline-block !important;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  padding-left: 50rpx;
  padding-right: 50rpx;
  font-size: 35rpx;
}
.color1 {
  color: red;
  font-size: 40rpx;
  font-weight: 700;
}

/*  */

.swiper {
  height: 1000rpx;
}
.loadmore {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100rpx;
  background-color: #f9f5f5;
  padding: 30rpx;
}
.font {
  font-size: 30rpx;
  color: #a9a5a0;
}
// 聊天图标的红点
.weizhi {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: red;
}

// 下载内容
/*每个页面公共css */

.myfile {
  padding: 10upx 4%;
  padding-bottom: 140upx;
  margin-top: 10upx;
}

.order_file {
  height: 180upx;
  width: 100%;
  background-color: #fff;
  border-radius: 10upx;
  position: relative;
  box-shadow: 0upx 0upx 10upx #ddd;
  margin-bottom: 20upx;
}

.order_file image {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.file_box {
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;
  box-sizing: border-box;
  padding: 20upx;
  display: flex;
  align-items: center;
}

.file_icon text {
  font-size: 40upx;
  margin-left: 10upx;
}

.file_box .center {
  margin-left: 20upx;
}

.file_box .center .name {
  height: 60upx;
  line-height: 60upx;
}

.file_box .center .name .text1 {
  font-size: 26upx;
  font-weight: bold;
  color: #333;
  display: inline-block;
  margin-right: 20upx;
}

.phones {
  font-size: 24upx;
  color: #999;
  z-index: 0;
}

.file_box .file_name {
  font-size: 26upx;
  font-weight: bold;
  color: #333;
}

.nofile {
  margin-left: 40upx;
  font-weight: bold;
  color: #333;
  font-size: 26upx;
}

.caozuo {
  position: absolute;
  right: 20upx;
  display: flex;
  top: 20upx;
}

.caozuo view {
  font-size: 24upx;
  color: #666;
  margin-left: 30upx;
}

.caozuo view text {
  font-size: 24upx;
}

.moren {
  position: absolute;
  top: 0;
  left: 0;
}

.moren text {
  font-size: 60upx;
}
</style>
